<template>
  <div class="merchant-register">
    <v-title :title="title" />
    <loading :show="loading" />
    <!-- step -->
    <step v-if="showStep" />
    <!-- text -->
    <div class="text" v-if="isExist && descText" v-html="descText"></div>
    <!-- form -->
    <v-form v-if="showForm" :status="status" />
    <!-- qrcode -->
    <div class="qrcode" v-if="status === 1">
      <div class="image">
        <img :src="my.qrcode_real" v-if="my && my.qrcode_real" />
      </div>
      <div class="pay-for">
        <div class="title">收款记录</div>
        <pay-for />
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import Step from './components/Step'
import Form from './components/Form'
import PayFor from './components/PayFor'
export default {
  name: 'MerchantRegister',
  components: {
    'v-title': Title,
    Loading,
    Step,
    'v-form': Form,
    PayFor
  },
  computed: {
    showStep() {
      if (!this.isExist) {
        return true
      } else {
        if (this.status === 0 || this.status === 2) {
          return true
        }
      }
      return false
    },
    showForm() {
      if (!this.isExist) {
        return true
      } else {
        if (this.status === 2) {
          return true
        }
      }
      return false
    },
    descText() {
      const reject = this.reject || '暂无...'
      switch (this.status) {
        case 0:
          return '审核中, 请耐心等待'
        case 2:
          return `<p>已驳回,原因: </p><p class="color">${reject}</p>`
        case 5:
          return '已注销'
        case 1:
          return ''
        case -99:
          return '已被删除,请联系客服'
        default:
          return ''
      }
    },
    title() {
      if (this.status === 1) {
        return '我的门店'
      }
      return this.$route.meta.title || '入驻申请'
    }
  },
  data() {
    return {
      loading: false,
      isExist: false,
      status: -100,
      reject: '',
      my: {}
    }
  },
  methods: {
    checkMerchant() {
      this.loading = true
      api.Merchant.checkMerchant().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.isExist = data.is_exist
        this.status = data.status
        this.reject = data.reject
        // qrcode request api
        if (this.status === 1) {
          const info = this.$store.getters['ExecUser/info']
          if (info && info.id) {
            this.fetchData(info.id)
          }
        }
      }).finally(() => {
        this.loading = false
      })
    },
    fetchData(userId) {
      this.loading = true
      api.Merchant.view({ user_id: userId }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.my = data
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created () {
    this.checkMerchant()
  }
}
</script>

<style scoped lang="stylus">
.merchant-register
  padding-top 45px
  padding-bottom 35px
  .text
    margin 10px
    background white
    padding 10px
    border-radius 10px
    font-size 16px
    ::v-deep
      p
        font-size 16px
        font-weight 700
        line-height 25px
        &.color
          color red
  .qrcode
    margin 10px
    //background white
    //padding 10px
    .image
      padding 10px
      background white
    .pay-for
      margin-top 10px
      .title
        color red
        font-weight 700
        font-size 16px
        background white
        padding 20px
</style>
